<script setup lang='ts'>
import { onMounted } from 'vue';

// 定义接收propos参数
// vue3.5+的版本的用法
// const {age = 10 } = defineProps<{
//     name?: string,
//     age?: number
// }>()

const props = withDefaults(
    defineProps<{
    name: string,
    age?: number,
    // 鸿蒙的写法传递回调函数
    func?(count:number):void
 }>(),
    {
        name: "默认值",
        age: 100
    }
)

const test = () => {
    // 这里面拿到的是最新的传递过来的数据
    console.log(props.name, props.age)
}
onMounted(() => {
    test()
})

// 自定义事件类型
// updateChange -参数1个 number类型
const emits = defineEmits<{
    // key(事件名称):value(参数类型数组)
    "updateAge":[number], // [age:number]
    "updateName":[string]
    'updateAll':[number,string]
}>()
const toParent = ()=>{
    emits('updateAge',props.age + 10)
}
const toParentName = ()=>{
    emits('updateName',props.name + '123')
}

const toParentAll = ()=>{
    emits('updateAll',props.age +100 ,props.name + '涂山')
}


</script>

<template>
    <h2>父传子中的子组件</h2>
    <p>姓名：{{ name }}</p>
    <p>姓名：{{ age }}</p>
    <button @click="func(age - 1)">子传父-回调函数形式</button>
    <button @click="toParent">子传父-emits形式</button>
    <button @click="toParentName">子传父-修改父组件名称</button>
    <button @click="toParentAll">子传父-修改全部内容</button>
</template>

<style scoped></style>